<template>
  <div class="quick">
    <div class="title">
      <h3 class="inTits"><span></span>书法工具</h3>
    </div>
    <div class="list">
      <ul class="clearfix">
        <li>
          <router-link to="/softUseDetail" target="_blank">
            <p class="image"><img src="https://www.namoc.cn/namoc/zgh/images/d5b15b9ace7a4bf9a7e28f75be1bd89f.jpg" style=" border:0px;"></p>
            <span>象虹书法</span>
          </router-link>
        </li>

        <li>
          <router-link to="/SoftTeachDetail" target="_blank">
            <p class="image"><img src="https://www.namoc.cn/namoc/youh/images/e8be386ff5264d818f29ef146819f4c0.jpg" style=" border:0px;"></p>
            <span>教学演示</span>
          </router-link>
        </li>

        <li>
          <a href="http://xhsf.zxxsfjyw.com" target="_blank">
            <p class="image"><img src="https://www.namoc.cn/namoc/banh/images/4455a1601827472695ffd58fc61ec0ab.jpg" style=" border:0px;"></p>
            <span>管理平台</span>
          </a>
        </li>

        <li class="mrline">
          <router-link to="/BookPracticeDetail" target="_blank">
            <p class="image"><img src="https://www.namoc.cn/namoc/diaos/images/25221b3adf3e4084a3edb5e9e9c65df5.jpg" style=" border:0px;"></p>
            <span>教材教辅</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuickModule'
}
</script>

<style lang="scss" scoped>
.quick {
  width: 1600px;
  margin: auto;
  border-bottom: 1px solid #dcdcdc;
  padding: 40px 0;
  .title {
    text-align: center;
    font-size: 22px;
    color: #a77e30;

    .inTits {
      width: 100%;
      height: 60px;
      line-height: 60px;
    }

    .inTits span {
      background: url("@/assets/quick/name_ico_yellow.png") no-repeat;
      background-size: cover;
      display: inline-block;
      width: 30px;
      height: 30px;
      float: none;
      margin-right: 5px;
      vertical-align: middle; /* 可以使元素在行内垂直居中 */
    }
  }

  .list {
    overflow: hidden;
    .clearfix{
      zoom: 1;
    }
    li {
      position: relative;
      float: left;
      width: 23%;
      height: 280px;
      margin: 20px 20px 0 0;
      overflow: hidden;
      span{
        position: absolute;
        bottom: 0;
        left: 0;
        height: 40px;
        width: 100%;
        text-align: center;
        background: #a77e30;
        color: #ffffff;
        font-size: 18px;
        line-height: 40px;
        white-space: nowrap;
        z-index: 104;
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
  }


}
</style>
